<template>
	<div class="app-container">
		<!-- 顶部导航栏 -->
		<header class="header">
			<div class="logo">
				<span class="iconify" data-icon="mdi:medal" style="color: white;"></span>
				运动会管理系统
			</div>
			<div class="flex-grow"></div>
			<div class="flex items-center gap-6">
				<div class="flex items-center gap-2">
					<img id="img-head" src="img/jstu1.webp">
					<span class="text-white text-sm">{{ currentUser?.realName || '管理员' }}</span>
				</div>
				<div class="flex items-center gap-2">
					<a href="javascript:void(0)" class="denglu" @click="handleLogout">退出登录</a>
				</div>
			</div>
		</header>

		<!-- 左侧导航栏 -->
		<nav class="sidebar">
			<div class="menu-item" :class="{ active: $route.path === '/admin' }">
				<span class="iconify" data-icon="mdi:view-dashboard"></span>
				<a @click="$router.push('/admin')">系统管理</a>
			</div>
			<div class="menu-item" :class="{ active: $route.path === '/admin/users' }">
				<span class="iconify" data-icon="mdi:account-group"></span>
				<a @click="$router.push('/admin/users')">用户管理</a>
			</div>
			<div class="menu-item" :class="{ active: $route.path === '/admin/projects' }">
				<span class="iconify" data-icon="mdi:clipboard-list"></span>
				<a @click="$router.push('/admin/projects')">项目管理</a>
			</div>
			<div class="menu-item" :class="{ active: $route.path === '/admin/schedule' }">
				<span class="iconify" data-icon="mdi:calendar-clock"></span>
				<a @click="$router.push('/admin/schedule')">赛程管理</a>
			</div>
			<div class="menu-item" :class="{ active: $route.path === '/admin/judges' }">
				<span class="iconify" data-icon="mdi:whistle"></span>
				<a @click="$router.push('/admin/judges')">裁判分配</a>
			</div>
			<div class="menu-item active">
				<span class="iconify" data-icon="mdi:cog"></span>
				系统配置
			</div>
			<div class="menu-item" :class="{ active: $route.path === '/admin/dict-type' }">
				<span class="iconify" data-icon="mdi:book-open"></span>
				<a @click="$router.push('/admin/dict-type')">字典管理</a>
			</div>
		</nav>

		<!-- 主要内容 -->
		<main class="content">
			<div class="main-content-header">
				<h1 class="text-2xl font-medium">系统配置管理</h1>
				<div class="header-actions">
					<el-button type="warning" size="small" @click="handleRefreshCache">
						<i class="el-icon-refresh"></i> 刷新缓存
					</el-button>
					<el-button type="success" size="small" @click="handleBatchEdit">
						<i class="el-icon-edit"></i> 批量编辑
					</el-button>
					<el-button type="primary" size="small" @click="handleAdd">
						<i class="el-icon-plus"></i> 添加配置
					</el-button>
				</div>
			</div>

			<!-- 配置分类标签页 -->
			<div class="config-tabs">
				<el-tabs v-model="activeTab" @tab-click="handleTabClick">
					<el-tab-pane label="系统参数" name="system">
						<!-- 搜索区域 -->
						<div class="search-bar" v-show="activeTab === 'system'">
							<el-form :inline="true" :model="searchForm" size="small">
								<el-form-item label="配置键">
									<el-input v-model="searchForm.configKey" placeholder="请输入配置键" clearable style="width: 200px"></el-input>
								</el-form-item>
								<el-form-item label="配置名称">
									<el-input v-model="searchForm.configName" placeholder="请输入配置名称" clearable style="width: 200px"></el-input>
								</el-form-item>
								<el-form-item label="配置类型">
									<el-select v-model="searchForm.configType" placeholder="请选择配置类型" clearable style="width: 150px">
										<el-option label="系统配置" value="system"></el-option>
										<el-option label="业务配置" value="business"></el-option>
									</el-select>
								</el-form-item>
								<el-form-item label="状态">
									<el-select v-model="searchForm.status" placeholder="请选择状态" clearable style="width: 120px">
										<el-option label="启用" :value="1"></el-option>
										<el-option label="停用" :value="0"></el-option>
									</el-select>
								</el-form-item>
								<el-form-item>
									<el-button type="primary" @click="handleSearch" :loading="loading">
										<i class="el-icon-search"></i> 搜索
									</el-button>
									<el-button @click="handleReset">
										<i class="el-icon-refresh"></i> 重置
									</el-button>
								</el-form-item>
							</el-form>
						</div>

						<!-- 系统配置表格 -->
						<div class="table-container" v-show="activeTab === 'system'">
							<el-table
								:data="tableData"
								v-loading="loading"
								stripe
								border
								style="width: 100%"
								@selection-change="handleSelectionChange">
								<el-table-column type="selection" width="55" align="center"></el-table-column>
								<el-table-column prop="id" label="配置ID" width="80" align="center"></el-table-column>
								<el-table-column prop="configKey" label="配置键" width="200" align="center" show-overflow-tooltip></el-table-column>
								<el-table-column prop="configName" label="配置名称" width="150" align="center" show-overflow-tooltip></el-table-column>
								<el-table-column prop="configValue" label="配置值" min-width="200" show-overflow-tooltip></el-table-column>
								<el-table-column prop="configType" label="配置类型" width="100" align="center">
									<template #default="scope">
										<el-tag :type="scope.row.configType === 'system' ? 'danger' : 'primary'" size="small">
											{{ scope.row.configType === 'system' ? '系统配置' : '业务配置' }}
										</el-tag>
									</template>
								</el-table-column>
								<el-table-column prop="description" label="描述" min-width="200" show-overflow-tooltip></el-table-column>
								<el-table-column prop="isBuiltIn" label="内置配置" width="100" align="center">
									<template #default="scope">
										<el-tag :type="scope.row.isBuiltIn === 1 ? 'warning' : 'info'" size="small">
											{{ scope.row.isBuiltIn === 1 ? '是' : '否' }}
										</el-tag>
									</template>
								</el-table-column>
								<el-table-column prop="status" label="状态" width="80" align="center">
									<template #default="scope">
										<el-tag :type="scope.row.status === 1 ? 'success' : 'danger'" size="small">
											{{ scope.row.status === 1 ? '启用' : '停用' }}
										</el-tag>
									</template>
								</el-table-column>
								<el-table-column prop="createdAt" label="创建时间" width="180" align="center">
									<template #default="scope">
										{{ formatDateTime(scope.row.createdAt) }}
									</template>
								</el-table-column>
								<el-table-column label="操作" width="240" align="center" fixed="right">
									<template #default="scope">
										<el-button-group size="mini">
											<el-button type="primary" icon="el-icon-edit" @click="handleEdit(scope.row)">编辑</el-button>
											<el-button
												:type="scope.row.status === 1 ? 'warning' : 'success'"
												@click="handleToggleStatus(scope.row)"
												:disabled="scope.row.isBuiltIn === 1">
												{{ scope.row.status === 1 ? '停用' : '启用' }}
											</el-button>
											<el-button
												type="danger"
												icon="el-icon-delete"
												@click="handleDelete(scope.row)"
												:disabled="scope.row.isBuiltIn === 1">
												删除
											</el-button>
										</el-button-group>
									</template>
								</el-table-column>
							</el-table>

							<!-- 分页控制 -->
							<div class="pagination-container">
								<el-pagination
									@size-change="handleSizeChange"
									@current-change="handleCurrentChange"
									:current-page="pagination.currentPage"
									:page-sizes="[10, 20, 50, 100]"
									:page-size="pagination.pageSize"
									layout="total, sizes, prev, pager, next, jumper"
									:total="pagination.total">
								</el-pagination>
							</div>

							<!-- 批量操作 -->
							<div class="batch-operations" v-if="selectedConfigs.length > 0">
								<span>已选择 {{ selectedConfigs.length }} 项</span>
								<el-button type="danger" size="small" @click="handleBatchDelete">批量删除</el-button>
								<el-button type="warning" size="small" @click="handleBatchDisable">批量停用</el-button>
								<el-button type="success" size="small" @click="handleBatchEnable">批量启用</el-button>
							</div>
						</div>
					</el-tab-pane>

					<el-tab-pane label="邮件服务" name="email">
						<div class="service-config-card">
							<el-card shadow="hover">
								<template #header>
									<div class="card-header">
										<i class="el-icon-message"></i>
										<span>邮件服务配置</span>
										<el-button type="primary" size="small" @click="handleTestEmail" :loading="emailTestLoading">
											<i class="el-icon-video-play"></i> 测试邮件
										</el-button>
									</div>
								</template>
								<el-form :model="emailConfig" :rules="emailConfigRules" ref="emailConfigRef" label-width="120px">
									<el-row :gutter="20">
										<el-col :span="12">
											<el-form-item label="SMTP服务器" prop="smtpHost">
												<el-input v-model="emailConfig.smtpHost" placeholder="请输入SMTP服务器地址"></el-input>
											</el-form-item>
										</el-col>
										<el-col :span="12">
											<el-form-item label="端口" prop="smtpPort">
												<el-input-number v-model="emailConfig.smtpPort" :min="1" :max="65535" style="width: 100%"></el-input-number>
											</el-form-item>
										</el-col>
									</el-row>
									<el-row :gutter="20">
										<el-col :span="12">
											<el-form-item label="发件人邮箱" prop="fromEmail">
												<el-input v-model="emailConfig.fromEmail" placeholder="请输入发件人邮箱"></el-input>
											</el-form-item>
										</el-col>
										<el-col :span="12">
											<el-form-item label="用户名" prop="username">
												<el-input v-model="emailConfig.username" placeholder="请输入邮箱用户名"></el-input>
											</el-form-item>
										</el-col>
									</el-row>
									<el-row :gutter="20">
										<el-col :span="12">
											<el-form-item label="密码" prop="password">
												<el-input v-model="emailConfig.password" type="password" placeholder="请输入邮箱密码或授权码" show-password></el-input>
											</el-form-item>
										</el-col>
										<el-col :span="12">
											<el-form-item label="启用SSL">
												<el-switch v-model="emailConfig.sslEnabled" active-text="是" inactive-text="否"></el-switch>
											</el-form-item>
										</el-col>
									</el-row>
									<el-form-item>
										<el-button type="primary" @click="handleSaveEmailConfig" :loading="emailSaveLoading">
											<i class="el-icon-check"></i> 保存配置
										</el-button>
										<el-button @click="handleResetEmailConfig">
											<i class="el-icon-refresh"></i> 重置
										</el-button>
									</el-form-item>
								</el-form>
							</el-card>
						</div>
					</el-tab-pane>

					<el-tab-pane label="短信服务" name="sms">
						<div class="service-config-card">
							<el-card shadow="hover">
								<template #header>
									<div class="card-header">
										<i class="el-icon-mobile-phone"></i>
										<span>短信服务配置</span>
										<el-button type="primary" size="small" @click="handleTestSms" :loading="smsTestLoading">
											<i class="el-icon-video-play"></i> 测试短信
										</el-button>
									</div>
								</template>
								<el-form :model="smsConfig" :rules="smsConfigRules" ref="smsConfigRef" label-width="120px">
									<el-form-item label="服务商" prop="provider">
										<el-select v-model="smsConfig.provider" placeholder="请选择短信服务商" style="width: 100%">
											<el-option label="阿里云" value="aliyun"></el-option>
											<el-option label="腾讯云" value="tencent"></el-option>
											<el-option label="华为云" value="huawei"></el-option>
										</el-select>
									</el-form-item>
									<el-row :gutter="20">
										<el-col :span="12">
											<el-form-item label="Access Key" prop="accessKey">
												<el-input v-model="smsConfig.accessKey" placeholder="请输入Access Key"></el-input>
											</el-form-item>
										</el-col>
										<el-col :span="12">
											<el-form-item label="Secret Key" prop="secretKey">
												<el-input v-model="smsConfig.secretKey" type="password" placeholder="请输入Secret Key" show-password></el-input>
											</el-form-item>
										</el-col>
									</el-row>
									<el-row :gutter="20">
										<el-col :span="12">
											<el-form-item label="签名" prop="signName">
												<el-input v-model="smsConfig.signName" placeholder="请输入短信签名"></el-input>
											</el-form-item>
										</el-col>
										<el-col :span="12">
											<el-form-item label="模板ID" prop="templateId">
												<el-input v-model="smsConfig.templateId" placeholder="请输入短信模板ID"></el-input>
											</el-form-item>
										</el-col>
									</el-row>
									<el-form-item>
										<el-button type="primary" @click="handleSaveSmsConfig" :loading="smsSaveLoading">
											<i class="el-icon-check"></i> 保存配置
										</el-button>
										<el-button @click="handleResetSmsConfig">
											<i class="el-icon-refresh"></i> 重置
										</el-button>
									</el-form-item>
								</el-form>
							</el-card>
						</div>
					</el-tab-pane>

					<el-tab-pane label="安全设置" name="security">
						<div class="service-config-card">
							<el-row :gutter="20">
								<el-col :span="12">
									<el-card shadow="hover">
										<template #header>
											<div class="card-header">
												<i class="el-icon-lock"></i>
												<span>密码策略</span>
											</div>
										</template>
										<el-form :model="securityConfig.password" label-width="100px">
											<el-form-item label="最小长度">
												<el-input-number v-model="securityConfig.password.minLength" :min="6" :max="20" style="width: 100%"></el-input-number>
											</el-form-item>
											<el-form-item label="包含大写字母">
												<el-switch v-model="securityConfig.password.requireUppercase"></el-switch>
											</el-form-item>
											<el-form-item label="包含小写字母">
												<el-switch v-model="securityConfig.password.requireLowercase"></el-switch>
											</el-form-item>
											<el-form-item label="包含数字">
												<el-switch v-model="securityConfig.password.requireNumbers"></el-switch>
											</el-form-item>
											<el-form-item label="包含特殊字符">
												<el-switch v-model="securityConfig.password.requireSpecialChars"></el-switch>
											</el-form-item>
										</el-form>
									</el-card>
								</el-col>
								<el-col :span="12">
									<el-card shadow="hover">
										<template #header>
											<div class="card-header">
												<i class="el-icon-warning"></i>
												<span>登录安全</span>
											</div>
										</template>
										<el-form :model="securityConfig.login" label-width="100px">
											<el-form-item label="最大尝试次数">
												<el-input-number v-model="securityConfig.login.maxAttempts" :min="3" :max="10" style="width: 100%"></el-input-number>
											</el-form-item>
											<el-form-item label="锁定时间(分钟)">
												<el-input-number v-model="securityConfig.login.lockoutDuration" :min="5" :max="60" style="width: 100%"></el-input-number>
											</el-form-item>
											<el-form-item label="会话超时(小时)">
												<el-input-number v-model="securityConfig.login.sessionTimeout" :min="1" :max="24" style="width: 100%"></el-input-number>
											</el-form-item>
											<el-form-item label="双因素认证">
												<el-switch v-model="securityConfig.login.twoFactorEnabled"></el-switch>
											</el-form-item>
										</el-form>
									</el-card>
								</el-col>
							</el-row>
							<div class="security-actions">
								<el-button type="primary" @click="handleSaveSecurityConfig" :loading="securitySaveLoading">
									<i class="el-icon-check"></i> 保存安全配置
								</el-button>
							</div>
						</div>
					</el-tab-pane>

					<el-tab-pane label="主题配置" name="theme">
						<div class="service-config-card">
							<el-row :gutter="20">
								<el-col :span="12">
									<el-card shadow="hover">
										<template #header>
											<div class="card-header">
												<i class="el-icon-picture"></i>
												<span>主题设置</span>
											</div>
										</template>
										<el-form :model="themeConfig" label-width="100px">
											<el-form-item label="主题模式">
												<el-radio-group v-model="themeConfig.mode">
													<el-radio label="light">浅色</el-radio>
													<el-radio label="dark">深色</el-radio>
													<el-radio label="auto">跟随系统</el-radio>
												</el-radio-group>
											</el-form-item>
											<el-form-item label="主色调">
												<el-color-picker v-model="themeConfig.primaryColor"></el-color-picker>
											</el-form-item>
											<el-form-item label="侧边栏颜色">
												<el-color-picker v-model="themeConfig.sidebarColor"></el-color-picker>
											</el-form-item>
										</el-form>
									</el-card>
								</el-col>
								<el-col :span="12">
									<el-card shadow="hover">
										<template #header>
											<div class="card-header">
												<i class="el-icon-setting"></i>
												<span>界面设置</span>
											</div>
										</template>
										<el-form :model="themeConfig.ui" label-width="100px">
											<el-form-item label="固定头部">
												<el-switch v-model="themeConfig.ui.fixedHeader"></el-switch>
											</el-form-item>
											<el-form-item label="固定侧边栏">
												<el-switch v-model="themeConfig.ui.fixedSidebar"></el-switch>
											</el-form-item>
											<el-form-item label="显示标签页">
												<el-switch v-model="themeConfig.ui.showTabs"></el-switch>
											</el-form-item>
											<el-form-item label="显示面包屑">
												<el-switch v-model="themeConfig.ui.showBreadcrumb"></el-switch>
											</el-form-item>
										</el-form>
									</el-card>
								</el-col>
							</el-row>
							<div class="theme-actions">
								<el-button type="primary" @click="handleSaveThemeConfig" :loading="themeSaveLoading">
									<i class="el-icon-check"></i> 保存主题配置
								</el-button>
								<el-button @click="handlePreviewTheme">
									<i class="el-icon-view"></i> 预览主题
								</el-button>
								<el-button @click="handleResetTheme">
									<i class="el-icon-refresh"></i> 恢复默认
								</el-button>
							</div>
						</div>
					</el-tab-pane>
				</el-tabs>
			</div>

			<!-- 配置编辑对话框 -->
			<el-dialog
				:title="dialogTitle"
				v-model="dialogVisible"
				width="600px"
				:before-close="handleDialogClose">
				<el-form :model="configForm" :rules="configFormRules" ref="configFormRef" label-width="100px">
					<el-row :gutter="20">
						<el-col :span="12">
							<el-form-item label="配置键" prop="configKey">
								<el-input v-model="configForm.configKey" :disabled="isEdit || configForm.isBuiltIn === 1" placeholder="请输入配置键"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="配置名称" prop="configName">
								<el-input v-model="configForm.configName" placeholder="请输入配置名称"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="20">
						<el-col :span="12">
							<el-form-item label="配置类型" prop="configType">
								<el-select v-model="configForm.configType" placeholder="请选择配置类型" style="width: 100%" :disabled="configForm.isBuiltIn === 1">
									<el-option label="系统配置" value="system"></el-option>
									<el-option label="业务配置" value="business"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="状态" prop="status">
								<el-switch
									v-model="configForm.status"
									:active-value="1"
									:inactive-value="0"
									active-text="启用"
									inactive-text="停用"
									:disabled="configForm.isBuiltIn === 1">
								</el-switch>
							</el-form-item>
						</el-col>
					</el-row>
					<el-form-item label="配置值" prop="configValue">
						<el-input
							v-model="configForm.configValue"
							type="textarea"
							:rows="3"
							placeholder="请输入配置值"></el-input>
					</el-form-item>
					<el-form-item label="描述" prop="description">
						<el-input
							v-model="configForm.description"
							type="textarea"
							:rows="3"
							placeholder="请输入配置描述"></el-input>
					</el-form-item>
				</el-form>
				<template #footer>
					<div class="dialog-footer">
						<el-button @click="handleDialogClose">取消</el-button>
						<el-button type="primary" @click="handleSave" :loading="saveLoading">确定</el-button>
					</div>
				</template>
			</el-dialog>

			<!-- 批量编辑对话框 -->
			<el-dialog
				title="批量编辑配置"
				v-model="batchEditDialogVisible"
				width="800px"
				:before-close="handleBatchEditDialogClose">
				<el-alert
					title="提示"
					description="在此页面可以批量修改多个配置的值，内置配置的值也可以修改。配置键、名称、类型等属性无法在此页面修改。"
					type="info"
					:closable="false"
					show-icon
					style="margin-bottom: 20px">
				</el-alert>
				<el-table :data="batchEditData" border style="width: 100%">
					<el-table-column prop="configKey" label="配置键" width="200" show-overflow-tooltip></el-table-column>
					<el-table-column prop="configName" label="配置名称" width="150" show-overflow-tooltip></el-table-column>
					<el-table-column label="配置值" min-width="200">
						<template #default="scope">
							<el-input
								v-model="scope.row.configValue"
								type="textarea"
								:rows="2"
								placeholder="请输入配置值"></el-input>
						</template>
					</el-table-column>
				</el-table>
				<template #footer>
					<div class="dialog-footer">
						<el-button @click="handleBatchEditDialogClose">取消</el-button>
						<el-button type="primary" @click="handleBatchSave" :loading="batchSaveLoading">批量保存</el-button>
					</div>
				</template>
			</el-dialog>
		</main>
	</div>
</template>

<script>
import {
	getSystemConfigPage,
	addSystemConfig,
	updateSystemConfig,
	deleteSystemConfig,
	batchDeleteSystemConfigs,
	updateConfigStatus,
	refreshConfigCache,
	checkConfigKeyExists,
	batchUpdateConfigs,
	getConfigValue,
	getSystemConfigById
} from '@/api/system-config'
import { useAuthStore } from '@/stores/auth'

export default {
	name: 'SystemConfig',
	setup() {
		const authStore = useAuthStore()
		return {
			authStore
		}
	},
	data() {
		return {
			// 当前用户信息
			currentUser: null,

			// 当前激活的标签页
			activeTab: 'system',

			// 搜索表单
			searchForm: {
				configKey: '',
				configName: '',
				configType: '',
				status: null
			},

			// 邮件配置
			emailConfig: {
				smtpHost: '',
				smtpPort: 587,
				fromEmail: '',
				username: '',
				password: '',
				sslEnabled: true
			},
			emailConfigRules: {
				smtpHost: [
					{ required: true, message: '请输入SMTP服务器地址', trigger: 'blur' }
				],
				smtpPort: [
					{ required: true, message: '请输入SMTP端口', trigger: 'blur' }
				],
				fromEmail: [
					{ required: true, message: '请输入发件人邮箱', trigger: 'blur' },
					{ type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
				],
				username: [
					{ required: true, message: '请输入邮箱用户名', trigger: 'blur' }
				],
				password: [
					{ required: true, message: '请输入邮箱密码', trigger: 'blur' }
				]
			},
			emailSaveLoading: false,
			emailTestLoading: false,

			// 短信配置
			smsConfig: {
				provider: 'aliyun',
				accessKey: '',
				secretKey: '',
				signName: '',
				templateId: ''
			},
			smsConfigRules: {
				provider: [
					{ required: true, message: '请选择短信服务商', trigger: 'change' }
				],
				accessKey: [
					{ required: true, message: '请输入Access Key', trigger: 'blur' }
				],
				secretKey: [
					{ required: true, message: '请输入Secret Key', trigger: 'blur' }
				],
				signName: [
					{ required: true, message: '请输入短信签名', trigger: 'blur' }
				],
				templateId: [
					{ required: true, message: '请输入短信模板ID', trigger: 'blur' }
				]
			},
			smsSaveLoading: false,
			smsTestLoading: false,

			// 安全配置
			securityConfig: {
				password: {
					minLength: 8,
					requireUppercase: true,
					requireLowercase: true,
					requireNumbers: true,
					requireSpecialChars: false
				},
				login: {
					maxAttempts: 5,
					lockoutDuration: 30,
					sessionTimeout: 8,
					twoFactorEnabled: false
				}
			},
			securitySaveLoading: false,

			// 主题配置
			themeConfig: {
				mode: 'light',
				primaryColor: '#409EFF',
				sidebarColor: '#2C5AA0',
				ui: {
					fixedHeader: true,
					fixedSidebar: true,
					showTabs: true,
					showBreadcrumb: true
				}
			},
			themeSaveLoading: false,

			// 表格数据
			tableData: [],
			loading: false,

			// 分页信息
			pagination: {
				currentPage: 1,
				pageSize: 10,
				total: 0
			},

			// 选中的配置
			selectedConfigs: [],

			// 对话框相关
			dialogVisible: false,
			dialogTitle: '添加配置',
			isEdit: false,
			saveLoading: false,

			// 配置表单
			configForm: {
				id: null,
				configKey: '',
				configName: '',
				configValue: '',
				configType: 'business',
				description: '',
				isBuiltIn: 0,
				status: 1
			},

			// 表单验证规则
			configFormRules: {
				configKey: [
					{ required: true, message: '请输入配置键', trigger: 'blur' },
					{ min: 2, max: 100, message: '配置键长度在 2 到 100 个字符', trigger: 'blur' },
					{ pattern: /^[a-zA-Z][a-zA-Z0-9_]*$/, message: '配置键只能包含字母、数字和下划线，且必须以字母开头', trigger: 'blur' }
				],
				configName: [
					{ required: true, message: '请输入配置名称', trigger: 'blur' },
					{ min: 2, max: 100, message: '配置名称长度在 2 到 100 个字符', trigger: 'blur' }
				],
				configValue: [
					{ required: true, message: '请输入配置值', trigger: 'blur' }
				],
				configType: [
					{ required: true, message: '请选择配置类型', trigger: 'change' }
				]
			},

			// 批量编辑对话框
			batchEditDialogVisible: false,
			batchEditData: [],
			batchSaveLoading: false
		}
	},

	created() {
		// 获取当前用户信息
		this.currentUser = this.authStore.userInfo || JSON.parse(localStorage.getItem('user'))
		// 加载数据
		this.loadData()
		// 加载配置数据
		this.loadConfigs()
	},

	methods: {
		// 加载数据
		async loadData() {
			this.loading = true
			try {
				const params = {
					...this.searchForm,
					currentPage: this.pagination.currentPage,
					pageSize: this.pagination.pageSize
				}

				const response = await getSystemConfigPage(this.pagination.currentPage, this.pagination.pageSize, params)

				if (response.code === 200) {
					this.tableData = response.data.records
					this.pagination.total = response.data.total
				} else {
					this.$message.error(response.message || '获取数据失败')
				}
			} catch (error) {
				console.error('获取系统配置数据失败:', error)
				this.$message.error('获取数据失败')
			} finally {
				this.loading = false
			}
		},

		// 搜索
		handleSearch() {
			this.pagination.currentPage = 1
			this.loadData()
		},

		// 重置搜索
		handleReset() {
			this.searchForm = {
				configKey: '',
				configName: '',
				configType: '',
				status: null
			}
			this.handleSearch()
		},

		// 分页大小改变
		handleSizeChange(val) {
			this.pagination.pageSize = val
			this.loadData()
		},

		// 当前页改变
		handleCurrentChange(val) {
			this.pagination.currentPage = val
			this.loadData()
		},

		// 表格选择改变
		handleSelectionChange(selection) {
			this.selectedConfigs = selection
		},

		// 添加配置
		handleAdd() {
			this.dialogTitle = '添加配置'
			this.isEdit = false
			this.configForm = {
				id: null,
				configKey: '',
				configName: '',
				configValue: '',
				configType: 'business',
				description: '',
				isBuiltIn: 0,
				status: 1
			}
			this.dialogVisible = true
		},

		// 编辑配置
		async handleEdit(row) {
			this.dialogTitle = '编辑配置'
			this.isEdit = true

			try {
				const response = await getSystemConfigById(row.id)
				if (response.code === 200) {
					this.configForm = {
						...response.data,
						status: parseInt(response.data.status)
					}
					this.dialogVisible = true
				} else {
					this.$message.error(response.message || '获取配置信息失败')
				}
			} catch (error) {
				console.error('获取配置信息失败:', error)
				this.$message.error('获取配置信息失败')
			}
		},

		// 保存配置
		async handleSave() {
			this.$refs.configFormRef.validate(async (valid) => {
				if (valid) {
					this.saveLoading = true
					try {
						let response
						if (this.isEdit) {
							response = await updateSystemConfig(this.configForm)
						} else {
							// 检查配置键是否已存在
							const checkResponse = await checkConfigKeyExists(this.configForm.configKey)
							if (checkResponse.code === 200 && checkResponse.data) {
								this.$message.error('配置键已存在')
								this.saveLoading = false
								return
							}
							response = await addSystemConfig(this.configForm)
						}

						if (response.code === 200) {
							this.$message.success(this.isEdit ? '更新成功' : '添加成功')
							this.dialogVisible = false
							this.loadData()
						} else {
							this.$message.error(response.message || (this.isEdit ? '更新失败' : '添加失败'))
						}
					} catch (error) {
						console.error('保存配置失败:', error)
						this.$message.error(this.isEdit ? '更新失败' : '添加失败')
					} finally {
						this.saveLoading = false
					}
				}
			})
		},

		// 删除配置
		handleDelete(row) {
			if (row.isBuiltIn === 1) {
				this.$message.warning('内置配置不允许删除')
				return
			}

			this.$confirm('确定要删除该配置吗？', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(async () => {
				try {
					const response = await deleteSystemConfig(row.id)
					if (response.code === 200) {
						this.$message.success('删除成功')
						this.loadData()
					} else {
						this.$message.error(response.message || '删除失败')
					}
				} catch (error) {
					console.error('删除配置失败:', error)
					this.$message.error('删除失败')
				}
			})
		},

		// 批量删除
		handleBatchDelete() {
			// 过滤掉内置配置
			const validConfigs = this.selectedConfigs.filter(config => config.isBuiltIn !== 1)
			if (validConfigs.length === 0) {
				this.$message.warning('选中的配置都为内置配置，无法删除')
				return
			}

			if (validConfigs.length < this.selectedConfigs.length) {
				this.$confirm(`选中的配置中有 ${this.selectedConfigs.length - validConfigs.length} 个内置配置将被跳过，确定要删除剩余的 ${validConfigs.length} 个配置吗？`, '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(async () => {
					this.executeBatchDelete(validConfigs)
				})
			} else {
				this.$confirm(`确定要删除选中的 ${validConfigs.length} 个配置吗？`, '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(async () => {
					this.executeBatchDelete(validConfigs)
				})
			}
		},

		// 执行批量删除
		async executeBatchDelete(configs) {
			try {
				const configIds = configs.map(config => config.id)
				const response = await batchDeleteSystemConfigs(configIds)
				if (response.code === 200) {
					this.$message.success('批量删除成功')
					this.loadData()
					this.selectedConfigs = []
				} else {
					this.$message.error(response.message || '批量删除失败')
				}
			} catch (error) {
				console.error('批量删除失败:', error)
				this.$message.error('批量删除失败')
			}
		},

		// 切换配置状态
		async handleToggleStatus(row) {
			const action = row.status === 1 ? '停用' : '启用'
			this.$confirm(`确定要${action}该配置吗？`, '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(async () => {
				try {
					const response = await updateConfigStatus(row.id, row.status === 1 ? 0 : 1)
					if (response.code === 200) {
						this.$message.success(`${action}成功`)
						this.loadData()
					} else {
						this.$message.error(response.message || `${action}失败`)
					}
				} catch (error) {
					console.error(`${action}配置失败:`, error)
					this.$message.error(`${action}失败`)
				}
			})
		},

		// 批量启用
		handleBatchEnable() {
			this.$confirm(`确定要启用选中的 ${this.selectedConfigs.length} 个配置吗？`, '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(async () => {
				try {
					const configIds = this.selectedConfigs.map(config => config.id)
					const promises = configIds.map(id => updateConfigStatus(id, 1))
					await Promise.all(promises)
					this.$message.success('批量启用成功')
					this.loadData()
					this.selectedConfigs = []
				} catch (error) {
					console.error('批量启用失败:', error)
					this.$message.error('批量启用失败')
				}
			})
		},

		// 批量停用
		handleBatchDisable() {
			// 过滤掉内置配置
			const validConfigs = this.selectedConfigs.filter(config => config.isBuiltIn !== 1)
			if (validConfigs.length === 0) {
				this.$message.warning('选中的配置都为内置配置，无法停用')
				return
			}

			if (validConfigs.length < this.selectedConfigs.length) {
				this.$confirm(`选中的配置中有 ${this.selectedConfigs.length - validConfigs.length} 个内置配置将被跳过，确定要停用剩余的 ${validConfigs.length} 个配置吗？`, '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(async () => {
					this.executeBatchDisable(validConfigs)
				})
			} else {
				this.$confirm(`确定要停用选中的 ${validConfigs.length} 个配置吗？`, '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(async () => {
					this.executeBatchDisable(validConfigs)
				})
			}
		},

		// 执行批量停用
		async executeBatchDisable(configs) {
			try {
				const configIds = configs.map(config => config.id)
				const promises = configIds.map(id => updateConfigStatus(id, 0))
				await Promise.all(promises)
				this.$message.success('批量停用成功')
				this.loadData()
				this.selectedConfigs = []
			} catch (error) {
				console.error('批量停用失败:', error)
				this.$message.error('批量停用失败')
			}
		},

		// 批量编辑
		handleBatchEdit() {
			if (this.selectedConfigs.length === 0) {
				this.$message.warning('请选择要编辑的配置')
				return
			}

			// 深拷贝选中的配置数据
			this.batchEditData = JSON.parse(JSON.stringify(this.selectedConfigs))
			this.batchEditDialogVisible = true
		},

		// 批量保存
		async handleBatchSave() {
			this.batchSaveLoading = true
			try {
				const configMap = {}
				this.batchEditData.forEach(config => {
					configMap[config.configKey] = config.configValue
				})

				const response = await batchUpdateConfigs(configMap)
				if (response.code === 200) {
					this.$message.success('批量保存成功')
					this.batchEditDialogVisible = false
					this.loadData()
					this.selectedConfigs = []
				} else {
					this.$message.error(response.message || '批量保存失败')
				}
			} catch (error) {
				console.error('批量保存失败:', error)
				this.$message.error('批量保存失败')
			} finally {
				this.batchSaveLoading = false
			}
		},

		// 刷新缓存
		async handleRefreshCache() {
			try {
				const response = await refreshConfigCache()
				if (response.code === 200) {
					this.$message.success('缓存刷新成功')
				} else {
					this.$message.error(response.message || '缓存刷新失败')
				}
			} catch (error) {
				console.error('刷新缓存失败:', error)
				this.$message.error('刷新缓存失败')
			}
		},

		// 关闭对话框
		handleDialogClose() {
			this.dialogVisible = false
			this.$refs.configFormRef.resetFields()
		},

		// 关闭批量编辑对话框
		handleBatchEditDialogClose() {
			this.batchEditDialogVisible = false
			this.batchEditData = []
		},

		// 退出登录
		handleLogout() {
			this.$confirm('确定要退出登录吗？', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				// 清除用户信息
				this.authStore.logout()
				localStorage.removeItem('user')
				localStorage.removeItem('token')
				// 跳转到登录页
				this.$router.push('/login')
			})
		},

		// 格式化日期时间
		formatDateTime(dateTime) {
			if (!dateTime) return '-'
			return new Date(dateTime).toLocaleString('zh-CN')
		},

		// 加载所有配置数据
		async loadConfigs() {
			try {
				// 加载邮件配置
				await this.loadEmailConfig()
				// 加载短信配置
				await this.loadSmsConfig()
				// 加载安全配置
				await this.loadSecurityConfig()
				// 加载主题配置
				await this.loadThemeConfig()
			} catch (error) {
				console.error('加载配置失败:', error)
			}
		},

		// 标签页切换
		handleTabClick(tab) {
			// 根据标签页名称加载相应的配置
			switch (tab.name) {
				case 'email':
					this.loadEmailConfig()
					break
				case 'sms':
					this.loadSmsConfig()
					break
				case 'security':
					this.loadSecurityConfig()
					break
				case 'theme':
					this.loadThemeConfig()
					break
			}
		},

		// 加载邮件配置
		async loadEmailConfig() {
			try {
				const emailHost = await this.getConfigValue('email.smtp.host')
				const emailPort = await this.getConfigValue('email.smtp.port')
				const emailFrom = await this.getConfigValue('email.from')
				const emailUser = await this.getConfigValue('email.username')
				const emailPassword = await this.getConfigValue('email.password')
				const emailSsl = await this.getConfigValue('email.ssl.enabled')

				if (emailHost.code === 200) this.emailConfig.smtpHost = emailHost.data || ''
				if (emailPort.code === 200) this.emailConfig.smtpPort = parseInt(emailPort.data) || 587
				if (emailFrom.code === 200) this.emailConfig.fromEmail = emailFrom.data || ''
				if (emailUser.code === 200) this.emailConfig.username = emailUser.data || ''
				if (emailPassword.code === 200) this.emailConfig.password = emailPassword.data || ''
				if (emailSsl.code === 200) this.emailConfig.sslEnabled = emailSsl.data === 'true'
			} catch (error) {
				console.error('加载邮件配置失败:', error)
			}
		},

		// 保存邮件配置
		async handleSaveEmailConfig() {
			this.$refs.emailConfigRef.validate(async (valid) => {
				if (valid) {
					this.emailSaveLoading = true
					try {
						const configs = {
							'email.smtp.host': this.emailConfig.smtpHost,
							'email.smtp.port': this.emailConfig.smtpPort.toString(),
							'email.from': this.emailConfig.fromEmail,
							'email.username': this.emailConfig.username,
							'email.password': this.emailConfig.password,
							'email.ssl.enabled': this.emailConfig.sslEnabled.toString()
						}

						const response = await batchUpdateConfigs(configs)
						if (response.code === 200) {
							this.$message.success('邮件配置保存成功')
							await this.refreshConfigCache()
						} else {
							this.$message.error(response.message || '保存失败')
						}
					} catch (error) {
						console.error('保存邮件配置失败:', error)
						this.$message.error('保存失败')
					} finally {
						this.emailSaveLoading = false
					}
				}
			})
		},

		// 测试邮件
		async handleTestEmail() {
			this.emailTestLoading = true
			try {
				// 这里应该调用测试邮件的API
				this.$message.success('测试邮件发送成功，请检查收件箱')
			} catch (error) {
				console.error('测试邮件失败:', error)
				this.$message.error('测试邮件发送失败')
			} finally {
				this.emailTestLoading = false
			}
		},

		// 重置邮件配置
		handleResetEmailConfig() {
			this.$refs.emailConfigRef.resetFields()
		},

		// 加载短信配置
		async loadSmsConfig() {
			try {
				const provider = await this.getConfigValue('sms.provider')
				const accessKey = await this.getConfigValue('sms.access.key')
				const secretKey = await this.getConfigValue('sms.secret.key')
				const signName = await this.getConfigValue('sms.sign.name')
				const templateId = await this.getConfigValue('sms.template.id')

				if (provider.code === 200) this.smsConfig.provider = provider.data || 'aliyun'
				if (accessKey.code === 200) this.smsConfig.accessKey = accessKey.data || ''
				if (secretKey.code === 200) this.smsConfig.secretKey = secretKey.data || ''
				if (signName.code === 200) this.smsConfig.signName = signName.data || ''
				if (templateId.code === 200) this.smsConfig.templateId = templateId.data || ''
			} catch (error) {
				console.error('加载短信配置失败:', error)
			}
		},

		// 保存短信配置
		async handleSaveSmsConfig() {
			this.$refs.smsConfigRef.validate(async (valid) => {
				if (valid) {
					this.smsSaveLoading = true
					try {
						const configs = {
							'sms.provider': this.smsConfig.provider,
							'sms.access.key': this.smsConfig.accessKey,
							'sms.secret.key': this.smsConfig.secretKey,
							'sms.sign.name': this.smsConfig.signName,
							'sms.template.id': this.smsConfig.templateId
						}

						const response = await batchUpdateConfigs(configs)
						if (response.code === 200) {
							this.$message.success('短信配置保存成功')
							await this.refreshConfigCache()
						} else {
							this.$message.error(response.message || '保存失败')
						}
					} catch (error) {
						console.error('保存短信配置失败:', error)
						this.$message.error('保存失败')
					} finally {
						this.smsSaveLoading = false
					}
				}
			})
		},

		// 测试短信
		async handleTestSms() {
			this.smsTestLoading = true
			try {
				// 这里应该调用测试短信的API
				this.$message.success('测试短信发送成功，请检查手机')
			} catch (error) {
				console.error('测试短信失败:', error)
				this.$message.error('测试短信发送失败')
			} finally {
				this.smsTestLoading = false
			}
		},

		// 重置短信配置
		handleResetSmsConfig() {
			this.$refs.smsConfigRef.resetFields()
		},

		// 加载安全配置
		async loadSecurityConfig() {
			try {
				const passwordMinLength = await this.getConfigValue('security.password.min.length')
				const passwordUpper = await this.getConfigValue('security.password.require.uppercase')
				const passwordLower = await this.getConfigValue('security.password.require.lowercase')
				const passwordNumbers = await this.getConfigValue('security.password.require.numbers')
				const passwordSpecial = await this.getConfigValue('security.password.require.special')
				const loginMaxAttempts = await this.getConfigValue('security.login.max.attempts')
				const loginLockout = await this.getConfigValue('security.login.lockout.duration')
				const loginTimeout = await this.getConfigValue('security.login.session.timeout')
				const login2FA = await this.getConfigValue('security.login.two.factor.enabled')

				if (passwordMinLength.code === 200) this.securityConfig.password.minLength = parseInt(passwordMinLength.data) || 8
				if (passwordUpper.code === 200) this.securityConfig.password.requireUppercase = passwordUpper.data === 'true'
				if (passwordLower.code === 200) this.securityConfig.password.requireLowercase = passwordLower.data === 'true'
				if (passwordNumbers.code === 200) this.securityConfig.password.requireNumbers = passwordNumbers.data === 'true'
				if (passwordSpecial.code === 200) this.securityConfig.password.requireSpecialChars = passwordSpecial.data === 'true'
				if (loginMaxAttempts.code === 200) this.securityConfig.login.maxAttempts = parseInt(loginMaxAttempts.data) || 5
				if (loginLockout.code === 200) this.securityConfig.login.lockoutDuration = parseInt(loginLockout.data) || 30
				if (loginTimeout.code === 200) this.securityConfig.login.sessionTimeout = parseInt(loginTimeout.data) || 8
				if (login2FA.code === 200) this.securityConfig.login.twoFactorEnabled = login2FA.data === 'true'
			} catch (error) {
				console.error('加载安全配置失败:', error)
			}
		},

		// 保存安全配置
		async handleSaveSecurityConfig() {
			this.securitySaveLoading = true
			try {
				const configs = {
					'security.password.min.length': this.securityConfig.password.minLength.toString(),
					'security.password.require.uppercase': this.securityConfig.password.requireUppercase.toString(),
					'security.password.require.lowercase': this.securityConfig.password.requireLowercase.toString(),
					'security.password.require.numbers': this.securityConfig.password.requireNumbers.toString(),
					'security.password.require.special': this.securityConfig.password.requireSpecialChars.toString(),
					'security.login.max.attempts': this.securityConfig.login.maxAttempts.toString(),
					'security.login.lockout.duration': this.securityConfig.login.lockoutDuration.toString(),
					'security.login.session.timeout': this.securityConfig.login.sessionTimeout.toString(),
					'security.login.two.factor.enabled': this.securityConfig.login.twoFactorEnabled.toString()
				}

				const response = await batchUpdateConfigs(configs)
				if (response.code === 200) {
					this.$message.success('安全配置保存成功')
					await this.refreshConfigCache()
				} else {
					this.$message.error(response.message || '保存失败')
				}
			} catch (error) {
				console.error('保存安全配置失败:', error)
				this.$message.error('保存失败')
			} finally {
				this.securitySaveLoading = false
			}
		},

		// 加载主题配置
		async loadThemeConfig() {
			try {
				const themeMode = await this.getConfigValue('theme.mode')
				const primaryColor = await this.getConfigValue('theme.primary.color')
				const sidebarColor = await this.getConfigValue('theme.sidebar.color')
				const fixedHeader = await this.getConfigValue('theme.ui.fixed.header')
				const fixedSidebar = await this.getConfigValue('theme.ui.fixed.sidebar')
				const showTabs = await this.getConfigValue('theme.ui.show.tabs')
				const showBreadcrumb = await this.getConfigValue('theme.ui.show.breadcrumb')

				if (themeMode.code === 200) this.themeConfig.mode = themeMode.data || 'light'
				if (primaryColor.code === 200) this.themeConfig.primaryColor = primaryColor.data || '#409EFF'
				if (sidebarColor.code === 200) this.themeConfig.sidebarColor = sidebarColor.data || '#2C5AA0'
				if (fixedHeader.code === 200) this.themeConfig.ui.fixedHeader = fixedHeader.data === 'true'
				if (fixedSidebar.code === 200) this.themeConfig.ui.fixedSidebar = fixedSidebar.data === 'true'
				if (showTabs.code === 200) this.themeConfig.ui.showTabs = showTabs.data === 'true'
				if (showBreadcrumb.code === 200) this.themeConfig.ui.showBreadcrumb = showBreadcrumb.data === 'true'
			} catch (error) {
				console.error('加载主题配置失败:', error)
			}
		},

		// 保存主题配置
		async handleSaveThemeConfig() {
			this.themeSaveLoading = true
			try {
				const configs = {
					'theme.mode': this.themeConfig.mode,
					'theme.primary.color': this.themeConfig.primaryColor,
					'theme.sidebar.color': this.themeConfig.sidebarColor,
					'theme.ui.fixed.header': this.themeConfig.ui.fixedHeader.toString(),
					'theme.ui.fixed.sidebar': this.themeConfig.ui.fixedSidebar.toString(),
					'theme.ui.show.tabs': this.themeConfig.ui.showTabs.toString(),
					'theme.ui.show.breadcrumb': this.themeConfig.ui.showBreadcrumb.toString()
				}

				const response = await batchUpdateConfigs(configs)
				if (response.code === 200) {
					this.$message.success('主题配置保存成功')
					await this.refreshConfigCache()
					this.applyThemeConfig()
				} else {
					this.$message.error(response.message || '保存失败')
				}
			} catch (error) {
				console.error('保存主题配置失败:', error)
				this.$message.error('保存失败')
			} finally {
				this.themeSaveLoading = false
			}
		},

		// 预览主题
		handlePreviewTheme() {
			this.applyThemeConfig()
			this.$message.success('主题预览已应用')
		},

		// 应用主题配置
		applyThemeConfig() {
			// 应用主题颜色到CSS变量
			document.documentElement.style.setProperty('--primary-color', this.themeConfig.primaryColor)
			document.documentElement.style.setProperty('--sidebar-color', this.themeConfig.sidebarColor)

			// 应用主题模式
			if (this.themeConfig.mode === 'dark') {
				document.body.classList.add('dark-mode')
			} else {
				document.body.classList.remove('dark-mode')
			}
		},

		// 重置主题
		handleResetTheme() {
			this.themeConfig = {
				mode: 'light',
				primaryColor: '#409EFF',
				sidebarColor: '#2C5AA0',
				ui: {
					fixedHeader: true,
					fixedSidebar: true,
					showTabs: true,
					showBreadcrumb: true
				}
			}
			this.applyThemeConfig()
			this.$message.success('主题已重置为默认')
		},

		// 获取配置值
		async getConfigValue(configKey) {
			try {
				return await getConfigValue(configKey)
			} catch (error) {
				console.error(`获取配置 ${configKey} 失败:`, error)
				return { code: 500, data: '' }
			}
		}
	}
}
</script>

<style scoped>
/* 基础样式 */
* {
	font-family: 'PingFang SC', -apple-system, BlinkMacSystemFont, sans-serif;
}

body {
	background-color: #f0f2f5;
	color: #1a1a1a;
	margin: 0;
}

/* 容器布局 */
.app-container {
	max-width: 1440px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 240px 1fr;
	grid-template-rows: 64px 1fr;
	min-height: 100vh;
	background-color: #F5F7FA;
}

/* 顶部导航栏 */
.header {
	grid-column: 1 / -1;
	background-color: #2C5AA0;
	display: flex;
	align-items: center;
	padding: 0 24px;
}

.logo {
	font-size: 18px;
	font-weight: bold;
	color: white;
	display: flex;
	align-items: center;
	gap: 8px;
}

.flex-grow {
	flex-grow: 1;
}

.flex {
	display: flex;
}

.items-center {
	align-items: center;
}

.gap-6 {
	gap: 24px;
}

.gap-2 {
	gap: 8px;
}

/* 左侧导航栏 */
.sidebar {
	background-color: white;
	padding: 16px 0;
	border-right: 1px solid #e4e7ed;
}

.menu-item {
	padding: 12px 24px;
	color: #555;
	display: flex;
	align-items: center;
	gap: 12px;
	transition: all 0.3s;
	cursor: pointer;
}

.menu-item.active,
.menu-item:hover {
	background-color: #e8eff9;
	color: #2C5AA0;
	border-right: 3px solid #2C5AA0;
}

/* 主内容区 */
.content {
	padding: 24px;
	display: grid;
	grid-template-rows: auto 1fr;
	gap: 24px;
	overflow-y: auto;
}

.main-content-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-bottom: 16px;
	border-bottom: 1px solid #e4e7ed;
}

.header-actions {
	display: flex;
	gap: 12px;
}

/* 搜索区域 */
.search-bar {
	background: white;
	padding: 24px;
	border-radius: 8px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
	border: 1px solid #e4e7ed;
	margin-bottom: 24px;
}

/* 表格容器 */
.table-container {
	background: white;
	border-radius: 8px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
	border: 1px solid #e4e7ed;
	padding: 24px;
}

/* 分页容器 */
.pagination-container {
	margin-top: 20px;
	text-align: right;
}

/* 批量操作 */
.batch-operations {
	margin-top: 16px;
	padding: 12px;
	background-color: #f5f7fa;
	border-radius: 4px;
	display: flex;
	align-items: center;
	gap: 12px;
}

.batch-operations span {
	font-weight: 500;
	color: #606266;
}

/* 头像和退出登录 */
#img-head {
	height: 40px;
	width: 40px;
	border-radius: 50px;
}

.denglu {
	color: white;
	font-size: 15px;
	text-decoration: none;
}

.denglu:hover {
	color: #F44346;
}

.text-sm {
	font-size: 14px;
}

.text-white {
	color: white;
}

/* 配置标签页样式 */
.config-tabs {
	margin-bottom: 24px;
}

.service-config-card {
	margin-bottom: 24px;
}

.card-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: #409EFF;
}

.card-header i {
	margin-right: 8px;
	font-size: 16px;
}

.security-actions,
.theme-actions {
	margin-top: 20px;
	text-align: center;
}

.security-actions .el-button,
.theme-actions .el-button {
	margin: 0 8px;
}

/* 主题预览样式 */
:root {
	--primary-color: #409EFF;
	--sidebar-color: #2C5AA0;
}

/* 深色模式样式 */
body.dark-mode {
	background-color: #1a1a1a;
	color: #ffffff;
}

body.dark-mode .app-container {
	background-color: #2d2d2d;
}

body.dark-mode .header {
	background-color: #1a1a1a;
}

body.dark-mode .sidebar {
	background-color: #252525;
	border-right-color: #404040;
}

body.dark-mode .menu-item {
	color: #cccccc;
}

body.dark-mode .menu-item.active,
body.dark-mode .menu-item:hover {
	background-color: #404040;
	color: var(--primary-color);
}

body.dark-mode .search-bar,
body.dark-mode .table-container,
body.dark-mode .el-card {
	background-color: #2d2d2d;
	border-color: #404040;
}

body.dark-mode .main-content-header {
	border-bottom-color: #404040;
}

body.dark-mode .el-form-item__label {
	color: #cccccc;
}

body.dark-mode .el-input__inner,
body.dark-mode .el-textarea__inner,
body.dark-mode .el-select .el-input__inner {
	background-color: #404040;
	border-color: #555555;
	color: #ffffff;
}

/* Element UI 样式调整 */
.el-table {
	margin-top: 16px;
}

.el-table th {
	background-color: #fafafa !important;
}

.el-form-item {
	margin-bottom: 0;
}

.el-alert {
	margin-bottom: 20px;
}

.el-tabs__header {
	margin-bottom: 20px;
}

.el-card {
	margin-bottom: 20px;
}

.el-color-picker {
	margin-right: 10px;
}
</style>